<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="/static/mystyle/img/favicon.ico">
    <title>{{ caption }}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- jQuery 3 -->
    <script src="/static/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <!-- 主题风格，首页排版 -->
    <link rel="stylesheet" href="/static/adminlte/css/AdminLTE.min.css">
    <!-- AdminLTE皮肤。从css/skins中选择一个皮肤 -->
    <link rel="stylesheet" href="/static/adminlte/css/skins/_all-skins.min.css">

    <link rel="stylesheet" href="/static/mystyle/css/index.css">
    <!-- Google Font -->
    <link rel="stylesheet" href="/static/mystyle/css/googleapis-font.css">

    <link rel="stylesheet" type="text/css" href="/static/spop/dist/spop.min.css">
    {% block css %}
        <style>
            .skillbar {
                position: relative;
                display: block;
                width: 100%;
                padding-top: 5px;
                padding-left: 10px;
                cursor: pointer;
                height: 32px;
                background-color: #ecf0f5;
            }
        </style>


    {% endblock %}

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <header class="main-header" style="min-width: 800px;">
        <!-- 头部logo -->
        <a href="/" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>Dev</b>Ops</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Dev</b>Ops</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-/static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <!-- Notifications: style can be found in dropdown.less -->
                    <li class="dropdown notifications-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                            <span class="label label-warning">{{ request.session.task_count }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">你有{{ request.session.task_count }}个执行中任务</li>
                            <li class="footer"><a href="/log/task/">查看详情</a></li>
                        </ul>
                    </li>
                    <!-- Tasks: style can be found in dropdown.less -->
                    <li class="dropdown tasks-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-danger">{{ request.session.abnormal_count }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">你有{{ request.session.abnormal_count }}个待处理告警</li>
                            <li class="footer">
                                <a href="{{ request.session.zabbix_url }}" target="_blank">查看详情</a>
                            </li>
                        </ul>
                    </li>
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="/static/adminlte/img/user2-160x160.jpg" class="user-image" alt="User Image">
                            <span class="hidden-xs">{{ request.session.username }}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="/static/adminlte/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                                <p>
                                    {{ request.session.username }}
                                    <small>Member since Jan. 2019</small>
                                </p>
                            </li>

                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="/rbac/user/" class="btn btn-default btn-flat">设置</a>
                                </div>
                                <div class="pull-right">
                                    <a href="/logout/" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                    <li>&nbsp;&nbsp;&nbsp;
                        <!--
                      <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                      -->
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <!-- search form -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                  <i class="fa fa-search"></i>
                </button>
              </span>
                </div>
            </form>
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">菜单导航</li>

                <li>
                    <a href="/">
                        <i class="fa fa-home"></i> <span>首页</span>
                    </a>
                </li>

                {% for i in request.session.menu_list %}
                    <li class="treeview">
                        <a href="{{ i.perms_url }}">
                            <i class="fa {{ i.perms_img }}"></i> <span>{{ i.perms }}</span>
                            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                        </a>
                        <ul class="treeview-menu treeview-padding" style="padding-left: 20px">
                            {% for j in i.two_menu %}
                                <li><a href="{{ j.perms_url }}"><i class="fa {{ j.perms_img }}"></i>{{ j.perms }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>
                {% endfor %}
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="min-width: 800px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                不会开发的运维不是好的DBA!
                <small></small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/"><i class="fa fa-angle-double-right"></i> xiao2r</a></li>
                <li class="active">{{ caption }}</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            {% block center %}
                <!-- 信息盒子 -->
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-aqua"><i class="fa fa-server"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">服务器</span>
                                <a class="info-box-number" href="/cmdb/asset/">{{ asset_count }}</a>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-green"><i class="fa fa-user"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">用户</span>
                                <a class="info-box-number" href="/cmdb/asset/">{{ user_count }}</a>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->

                    <!-- fix for small devices only -->
                    <div class="clearfix visible-sm-block"></div>

                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-red"><i class="fa fa-fire"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">告警</span>
                                <a class="info-box-number" href="/cmdb/asset/">{{ abnormal_count }}</a>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-yellow"><i class="fa fa-tasks"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">任务</span>
                                <a class="info-box-number" href="/log/task/">{{ task_count }}</a>
                            </div>
                            <!-- /.info-box-content -->
                        </div>
                        <!-- /.info-box -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- 主体内容 -->
                <div class="row">
                    <!-- Left col -->
                    <div class="col-md-8">
                        <!-- MAP & BOX PANE -->
                        <div class="box box-success">
                            <div class="box-header with-border">
                                <h3 class="box-title">告警</h3>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                            class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body no-padding">
                                <div class="row" style="margin-bottom: 20px">
                                    <div class="pad">
                                        <!-- Map will be created here -->
                                        <div id="world-map-markers" style="max-height: 325px;">
                                            <div class="col-sm-2" style="padding-bottom: 5px">
                                                <lable>时间</lable>
                                            </div>
                                            <div class="col-sm-4" style="padding-bottom: 5px">
                                                <lable>服务器</lable>
                                            </div>
                                            <div class="col-sm-6" style="padding-bottom: 5px">
                                                <lable>问题</lable>
                                            </div>
                                            {% for i in zabbix_problem %}
                                                {% if i.3 == "0" %}
                                                    <div class="col-sm-2" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.0 }}</div>
                                                    </div>
                                                    <div class="col-sm-4" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.1 }}</div>
                                                    </div>
                                                    <div class="col-sm-6" style="padding-bottom: 5px;">
                                                        <div class="skillbar"
                                                             style="background-color: #97AAB3">{{ i.2 }}</div>
                                                    </div>
                                                {% elif i.3 == "1" %}

                                                    <div class="col-sm-2" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.0 }}</div>
                                                    </div>
                                                    <div class="col-sm-4" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.1 }}</div>
                                                    </div>
                                                    <div class="col-sm-6" style="padding-bottom: 5px;">
                                                        <div class="skillbar"
                                                             style="background-color: #7499FF">{{ i.2 }}</div>
                                                    </div>

                                                {% elif i.3 == "2" %}
                                                    <div class="col-sm-2" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.0 }}</div>
                                                    </div>
                                                    <div class="col-sm-4" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.1 }}</div>
                                                    </div>
                                                    <div class="col-sm-6" style="padding-bottom: 5px;">
                                                        <div class="skillbar"
                                                             style="background-color: #FFC859">{{ i.2 }}</div>
                                                    </div>

                                                {% elif i.3 == "3" %}
                                                    <div class="col-sm-2" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.0 }}</div>
                                                    </div>
                                                    <div class="col-sm-4" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.1 }}</div>
                                                    </div>
                                                    <div class="col-sm-6" style="padding-bottom: 5px;">
                                                        <div class="skillbar"
                                                             style="background-color: #FFA059">{{ i.2 }}</div>
                                                    </div>

                                                {% elif i.3 == "4" %}
                                                    <div class="col-sm-2" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.0 }}</div>
                                                    </div>
                                                    <div class="col-sm-4" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.1 }}</div>
                                                    </div>
                                                    <div class="col-sm-6" style="padding-bottom: 5px;">
                                                        <div class="skillbar"
                                                             style="background-color: #E97659">{{ i.2 }}</div>
                                                    </div>
                                                {% elif i.3 == "5" %}

                                                    <div class="col-sm-2" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.0 }}</div>
                                                    </div>
                                                    <div class="col-sm-4" style="padding-bottom: 5px">
                                                        <div class="skillbar">{{ i.1 }}</div>
                                                    </div>
                                                    <div class="col-sm-6" style="padding-bottom: 5px;">
                                                        <div class="skillbar"
                                                             style="background-color: #E45959">{{ i.2 }}</div>
                                                    </div>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="box box-info">
                            <div class="box-header with-border">
                                <h3 class="box-title">任务列表</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                            class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="table-responsive">
                                    <table class="table no-margin">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>任务</th>
                                            <th>任务ID</th>
                                            <th>状态</th>
                                            <th>时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        {% for i in task_obj %}
                                            <tr>
                                                <td>{{ i.id }}</td>
                                                <td><a href="/log/task/">{{ i.task_name }}</a></td>
                                                <td>{{ i.task_id }}</td>
                                                <td>
                                                    {% if i.status == "SUCCESS" %}
                                                        <span class="label label-success">
                                                    {% elif i.status == "PENDING" %}
                                                        <span class="label label-warning">
                                                    {% else %}
                                                        <span class="label label-danger">
                                                    {% endif %}
                                                    {{ i.status }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <div class="sparkbar" data-color="#00a65a"
                                                         data-height="20">{{ i.create_time|date:"Y-m-d H:m:i" }}</div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.table-responsive -->
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer text-center">
                                <a href="/log/task/" class="uppercase">查看更多</a>
                            </div>
                            <!-- /.box-footer -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->

                    <div class="col-md-4">
                        <!-- 资产分组 -->
                        <div class="box box-default">
                            <div class="box-header with-border">
                                <h3 class="box-title">资产分组</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                            class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="chart-responsive">
                                            <canvas id="assetChart" height="250px" width="550px"></canvas>
                                        </div>
                                        <!-- ./chart-responsive -->
                                    </div>
                                </div>
                                <!-- /.row -->
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer no-padding">
                            </div>
                            <!-- /.footer -->
                        </div>
                        <!-- /.box -->

                        <!-- 用户操作 -->
                        <div class="box box-primary">
                            <div class="box-header with-border">
                                <h3 class="box-title">用户操作</h3>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                            class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                            class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <div class="table-hover">
                                    <table class="table no-margin">
                                        <tbody>

                                        {% for i in userlog_obj %}
                                            <tr>
                                                <td>{{ i.user }}</td>
                                                <td> {{ i.menu }}---{{ i.action }}</td>
                                                <td>{{ i.create_time|date:"Y-m-d H:m:i" }}</td>
                                                <td>
                                                    {% if i.status == "SUCCESS" %}
                                                        <span class="label label-success">
                                                    {% elif i.status == "DENY" %}
                                                        <span class="label label-warning">
                                                    {% else %}
                                                        <span class="label label-danger">
                                                    {% endif %}
                                                    {{ i.status }}
                                                    </span>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer text-center">
                                <a href="/log/user/" class="uppercase">查看更多</a>
                            </div>
                            <!-- /.box-footer -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                </div>

            {% endblock %}

            {% block modal %}
            {% endblock %}
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>

    <!-- 底部信息 -->

    <footer class="main-footer">
        <strong>xiao2r create in 2019-07-09</strong>
    </footer>
    <div class="control-sidebar-bg"></div>
</div>
<!-- Bootstrap 3.3.7 -->
<script src="/static/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/adminlte/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/adminlte/js/demo.js"></script>
<script src="/static/adminlte/js/csrf.js"></script>
<script src="/static/spop/dist/spop.min.js"></script>
<script src="/static/mystyle/js/echarts.min.js"></script>
<script>
    //二级菜单展开
    var title = "{{ caption }}";
    $(".treeview-menu").find("a").each(function () {
        if (title == $(this).text()) {
            $(this).parent().addClass("active");
            $(this).parents('.treeview').addClass("menu-open active");
            return false;
        }
    });
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
    });

</script>
{% block js %}
    <script>

        setTimeout("location.reload()", 120000);

        var myChart = echarts.init(document.getElementById('assetChart'));
        var option = {
            title: {
                text: '资产分布',
                subtext: '分组',
                x: 'center'
            },

            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: '',
                data: {{ group_data|safe }},
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '60%'],
                    data:{{ data_info|safe }},
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    label: {
                        normal: {
                            formatter: '{b}:{c}({d}%)',
                            textStyle: {
                                fontWeight: 'normal',
                                fontSize: 10
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);


    </script>

{% endblock %}
</body>
</html>
